
<template>
    <div>
        <el-row :gutter="20">
            <template v-if="panels.length == 0">
                <el-col :span="6" v-for="i in 4" :key="i">
                    <el-skeleton style="width: 240px" loading animated>
                        <template #template>
                            <el-card shadow="hover" class="border-0">
                                <template #header>
                                    <div class="flex justify-between">
                                        <el-skeleton-item variant="h3" style="width: 50%" />
                                        <el-skeleton-item variant="text" style="width: 10%" />
                                    </div>
                                </template>
                                <span class="text-3xl font-sans text-gray-500 font-bold">
                                    <el-skeleton-item variant="h3" style="width: 80%" />
                                </span>
                                <el-divider direction="horizontal"></el-divider>
                                <div class="text-sm flex justify-between text-gray-500">
                                    <el-skeleton-item variant="h3" style="width: 50%" />
                                    <el-skeleton-item variant="text" style="width: 10%" />
                                </div>
                            </el-card>
                        </template>
                    </el-skeleton>
                </el-col>
            </template>
            <el-col :span="6" v-for="(item,index) in panels" :key="index">
                <div class="grid-content ep-bg-purple" />
                <el-skeleton style="width: 240px" :loading="loading" animated>
                    <!-- <template #template>
                        <div style="padding: 14px">
                            <div class="flex justify-between">
                                <el-skeleton-item variant="h3" style="width: 50%" />
                                <el-skeleton-item variant="text" style="width: 10%" />
                            </div>
                            <span class="text-3xl font-sans text-gray-500 font-bold">
                                <el-skeleton-item variant="h3" style="width: 80%" />
                            </span>
                            <el-divider direction="horizontal"></el-divider>
                            <div class="text-sm flex justify-between text-gray-500">
                                <el-skeleton-item variant="h3" style="width: 50%" />
                                <el-skeleton-item variant="text" style="width: 10%" />
                            </div>
                        </div>
                    </template> -->
                    <template #default>
                        <el-card shadow="hover" class="border-0">
                            <template #header>
                                <div class="flex justify-between">
                                    <span class="text-sm">{{item.title}}</span>
                                    <el-tag :type="item.unitColor" size="small" effect="plain">{{item.unit}}</el-tag>
                                </div>
                            </template>
                            <span class="text-3xl font-sans text-gray-500 font-bold">
                                {{item.subValue}}
                                <!-- <count-to :value="item.value"></count-to> -->
                            </span>
                            <el-divider direction="horizontal"></el-divider>
                            <div class="text-sm flex justify-between text-gray-500">
                                <span>{{item.subTitle}}</span>
                                <span>{{item.value}}</span>
                            </div>
                        </el-card>
                    </template>
                </el-skeleton>
            </el-col>

        </el-row>
        <el-row :gutter="20" class="mt-5">
            <el-col :span="3" v-for="(item,index) in iconNavs" :key="index">
                <el-card shadow="hover" class="border-0" @click="$router.push(item.path)">
                    <div class="flex flex-col items-center justify-center pointer">
                        <el-icon size="25" class="mb-2" :class="item.color">
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span class="text-sm">{{ item.title }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-4">
            <el-col :span="12">
               <IndexCard></IndexCard>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never" class="border-0">
                    <template #header>
                        <div class="flex justify-between">
                            <span class="text-sm">{{card1.title}}</span>
                            <el-tag type="danger" size="small" effect="plain">{{card1.tip}}</el-tag>
                        </div>
                    </template>
                    <el-row :gutter="20">
                        <template v-if="card1.btns.length == 0">
                            <el-col :span="6" v-for="i in 4" :key="i">
                                <el-skeleton style="width: 100%;" loading animated>
                                    <template #template>
                                        <el-card>
                                            <div class="flex flex-col items-center justify-center pointer">
                                                <el-skeleton-item variant="h3" style="width: 30%" class="mb-3" />
                                                <el-skeleton-item variant="h3" style="width: 70%" />
                                            </div>
                                        </el-card>
                                    </template>
                                </el-skeleton>
                            </el-col>
                        </template>
                        <el-col :span="6" v-for="(item,index) in card1.btns" :key="index">
                            <el-card shadow="hover" class="border-0 bg-light-400">
                                <div class="flex flex-col items-center justify-center pointer">
                                    <span class="text-xl mb-2">{{item.value}}</span>
                                    <span class="text-sm text-gray-500">{{item.label}}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card shadow="never" class="border-0 mt-4">
                    <template #header>
                        <div class="flex justify-between">
                            <span class="text-sm">{{card2.title}}</span>
                            <el-tag type="danger" size="small" effect="plain">{{card2.tip}}</el-tag>
                        </div>
                    </template>
                    <el-row :gutter="20">
                        <template>
                            <el-col :span="6" v-for="i in 4" :key="i">
                                <el-skeleton style="width: 100%;" loading animated>
                                    <template #template>
                                        <el-card>
                                            <div class="flex flex-col items-center justify-center pointer">
                                                <el-skeleton-item variant="h3" style="width: 30%" class="mb-3" />
                                                <el-skeleton-item variant="h3" style="width: 70%" />
                                            </div>
                                        </el-card>
                                    </template>
                                </el-skeleton>
                            </el-col>
                        </template>
                        <el-col :span="6" v-for="(item,index) in card2.btns ">
                            <el-card shadow="hover" class="border-0 bg-light-400">
                                <div class="flex flex-col items-center justify-center pointer">
                                    <span class="text-xl mb-2">{{item.value}}</span>
                                    <span class="text-sm text-gray-500">{{item.label}}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <!-- 店铺展示 -->

        </el-row>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import IndexCard from '~/components/index_charts.vue'
import {
    getStatistics1,
    getStatistics2,
} from '~/api/index.js'

const loading = ref(true)
const panels = ref([])
getStatistics1().then(res => {
    panels.value = res.panels
    loading.value = false
})
const iconNavs = ref([
    {
        icon: "user",
        color: "text-light-blue-500",
        title: "用户",
        path: "/user/list"
    },
    {
        icon: "shopping-cart",
        color: "text-violet-500",
        title: "商品",
        path: "/goods/list"
    },
    {
        icon: "tickets",
        color: "text-fuchsia-500",
        title: "订单",
        path: "/order/list"
    },
    {
        icon: "chat-dot-square",
        color: "text-teal-500",
        title: "评价",
        path: "/comment/list"
    },
    {
        icon: "picture",
        color: "text-rose-500",
        title: "图库",
        path: "/image/list"
    },
    {
        icon: "bell",
        color: "text-green-500",
        title: "公告",
        path: "/notice/list"
    },
    {
        icon: "set-up",
        color: "text-grey-500",
        title: "配置",
        path: "/setting/base"
    },
    {
        icon: "files",
        color: "text-yellow-500",
        title: "优惠券",
        path: "/coupon/list"
    }


])
const card1 = reactive({
    title: "店铺及商品提示",
    tip: "店铺及商品提示",
    btns: []
})

const card2 = reactive({
    title: "交易提示",
    tip: "需要立即处理的交易订单",
    btns: []
})
getStatistics2().then(res => {
    card1.btns = res.goods
    card2.btns = res.order
})
</script>

<style scoped>
/* .grid-content {
  border-radius: 4px;
  min-height: 100px;
  background-color: #f7f7f7;
  text-align: center;
} */
</style>
